{% extends './main.html'%}
{% block CSS%}
<style>
    .pg-count {
        text-align: center;
    }
    .pg-count .page {
        padding: 5px;
    }
    textarea {
        width:100%;
    }
    #changeArticleModalLabel {
        font-weight: bold;
    }
    .change-article-msg {
        text-align: center;
        font-weight: bold;
    }
    #editor {
        overflow: scroll;
        max-height: 500px;
        min-height: 300px;
    }
</style>
{% end %}

{% block Body %}
<br>
<div class="row">
  <div class="col-md-10 col-md-offset-1">
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-2">
                <button type="button" class="button button-primary button-pill button-small" data-toggle="modal" data-target="#changeArticleModal" action="post" onclick="changeArticleModal(this);"><i class="fa fa-plus"></i></button>
            </div>
        </div>

    </div>
    <br>
  <div class="row">
      <table class="table table-bordered">
        <colgroup>
          <col width="50">
          <col width="900">
          <col width="100">
          <col width="150">
          <col width="260">
          <col width="200">
        </colgroup>
        <thead>
          <tr class="info">
            <th class="text-center">ID</th>
            <th class="text-center">标题</th>
            <th class="text-center">阅读</th>
            <th class="text-center">文章类型</th>
            <th class="text-center">创建时间</th>
            <th class="text-center">操作</th>
          </tr>
        </thead>
        <tbody>
          {% for a in at_list %}
            <tr class="text-center">
                <td class="id">{{ a['id'] }}</td>
                <td class="title">{{ a['title']  }}</td>
                <td class="read_count">{{ a['read_count']  }}</td>
                <td class="article_type" type="{{ a['article_type_id']  }}">{{ a['article_type']  }}</td>
                <td class="created_date">{{ a['created_date']  }}</td>
                <td>
                    <textarea class="hide summary">{% raw a['summary'] %}</textarea>
                    <textarea class="hide content">{% raw a['content'] %}</textarea>
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#changeArticleModal" action="patch" onclick="changeArticleModal(this);">编辑</button>
                        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#changeArticleModal" action="delete" onclick="changeArticleModal(this);">删除</button>
                    </div>
                </td>
            </tr>
          {% end %}
        </tbody>
      </table>
  </div>
  <div class="row pg-count">
      <div>
          {% raw page_html %}
      </div>
  </div>
  </div>
</div>

<!-- changeArticleModal -->
<div class="modal fade" id="changeArticleModal" tabindex="-1" role="dialog" aria-labelledby="changeArticleModal">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" onclick="closeModal();">&times;</span></button>
        <h4 class="modal-title" id="changeArticleModalLabel">新增文章:</h4>
      </div>
        <br>
        <div class="change-article-msg col-md-12"></div>
        <br>
      <div class="modal-body row">
          <div class="col-md-12">
              <div class="input-group">
                  <span class="input-group-addon" id="title-addon">文章标题:</span>
                  <input type="text" id="title" class="form-control" placeholder="文章标题" aria-describedby="title-addon">
              </div>
              <br>
              <div class="input-group">
                  <span class="input-group-addon" id="type-addon">文章类型:</span>
                  <select class="form-control type" id="article-type">
                      {% for type in article_types %}
                         <option value="{{ type['id'] }}">{{ type['article_type'] }}</option>
                      {% end %}
                  </select>
              </div>
              <hr>
              <h4>文章简介:</h4>
              <textarea id="summary" class="form-control" placeholder="文章简介" rows="2"></textarea>
              <hr>
              <h4>文章内容:</h4>
              <!-- edit toolbar -->
              <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
                <div class="btn-group">
                <a class="btn dropdown-toggle" data-toggle="dropdown" title="" data-original-title="Font"><i class="fa fa-font"></i><b class="caret"></b></a>
                  <ul class="dropdown-menu">
                  <li><a data-edit="fontName Serif" style="font-family:'Serif'">Serif</a></li><li><a data-edit="fontName Sans" style="font-family:'Sans'">Sans</a></li><li><a data-edit="fontName Arial" style="font-family:'Arial'">Arial</a></li><li><a data-edit="fontName Arial Black" style="font-family:'Arial Black'">Arial Black</a></li><li><a data-edit="fontName Courier" style="font-family:'Courier'">Courier</a></li><li><a data-edit="fontName Courier New" style="font-family:'Courier New'">Courier New</a></li><li><a data-edit="fontName Comic Sans MS" style="font-family:'Comic Sans MS'">Comic Sans MS</a></li><li><a data-edit="fontName Helvetica" style="font-family:'Helvetica'">Helvetica</a></li><li><a data-edit="fontName Impact" style="font-family:'Impact'">Impact</a></li><li><a data-edit="fontName Lucida Grande" style="font-family:'Lucida Grande'">Lucida Grande</a></li><li><a data-edit="fontName Lucida Sans" style="font-family:'Lucida Sans'">Lucida Sans</a></li><li><a data-edit="fontName Tahoma" style="font-family:'Tahoma'">Tahoma</a></li><li><a data-edit="fontName Times" style="font-family:'Times'">Times</a></li><li><a data-edit="fontName Times New Roman" style="font-family:'Times New Roman'">Times New Roman</a></li><li><a data-edit="fontName Verdana" style="font-family:'Verdana'">Verdana</a></li></ul>
                </div>
                <div class="btn-group">
                <a class="btn dropdown-toggle" data-toggle="dropdown" title="" data-original-title="Font Size"><i class="fa fa-text-height"></i>&nbsp;<b class="caret"></b></a>
                  <ul class="dropdown-menu">
                  <li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
                  <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
                  <li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
                  </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-info" data-edit="bold" title="" data-original-title="Bold (Ctrl/Cmd+B)"><i class="fa fa-bold"></i></a>
                    <a class="btn" data-edit="italic" title="" data-original-title="Italic (Ctrl/Cmd+I)"><i class="fa fa-italic"></i></a>
                    <a class="btn" data-edit="strikethrough" title="" data-original-title="Strikethrough"><i class="fa fa-strikethrough"></i></a>
                    <a class="btn" data-edit="underline" title="" data-original-title="Underline (Ctrl/Cmd+U)"><i class="fa fa-underline"></i></a>
                </div>
                <div class="btn-group">
                    <a class="btn" data-edit="insertunorderedlist" title="" data-original-title="Bullet list"><i class="fa fa-list-ul"></i></a>
                    <a class="btn" data-edit="insertorderedlist" title="" data-original-title="Number list"><i class="fa fa-list-ol"></i></a>
                    <a class="btn" data-edit="outdent" title="" data-original-title="Reduce indent (Shift+Tab)"><i class="fa fa-outdent"></i></a>
                    <a class="btn" data-edit="indent" title="" data-original-title="Indent (Tab)"><i class="fa fa-indent"></i></a>
                </div>
                <div class="btn-group">
                    <a class="btn btn-info" data-edit="justifyleft" title="" data-original-title="Align Left (Ctrl/Cmd+L)"><i class="fa fa-align-left"></i></a>
                    <a class="btn" data-edit="justifycenter" title="" data-original-title="Center (Ctrl/Cmd+E)"><i class="fa fa-align-center"></i></a>
                    <a class="btn" data-edit="justifyright" title="" data-original-title="Align Right (Ctrl/Cmd+R)"><i class="fa fa-align-right"></i></a>
                    <a class="btn" data-edit="justifyfull" title="" data-original-title="Justify (Ctrl/Cmd+J)"><i class="fa fa-align-justify"></i></a>
                </div>
                <div class="btn-group">
                  <a class="btn dropdown-toggle" data-toggle="dropdown" title="" data-original-title="Hyperlink"><i class="fa fa-link"></i></a>
                    <div class="dropdown-menu input-append">
                        <input class="span2" placeholder="URL" type="text" data-edit="createLink">
                        <button class="btn" type="button">Add</button>
                </div>
                <a class="btn" data-edit="unlink" title="" data-original-title="Remove Hyperlink"><i class="fa fa-cut"></i></a>
                </div>
                <div class="btn-group">
                    <a class="btn" title="" id="pictureBtn" data-original-title="Insert picture (or just drag &amp; drop)"><i class="fa fa-file-image-o"></i></a>
                    <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" style="opacity: 0; position: absolute; top: 0px; left: 0px; width: 37px; height: 30px;">
                </div>
                <div class="btn-group">
                    <a class="btn" data-edit="undo" title="" data-original-title="Undo (Ctrl/Cmd+Z)"><i class="fa fa-undo"></i></a>
                    <a class="btn" data-edit="redo" title="" data-original-title="Redo (Ctrl/Cmd+Y)"><i class="fa fa-repeat"></i></a>
                </div>
                <input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="" style="display: none;">
              </div>
              <!-- edit toolbar end -->
              <div id="editor"></div>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="button button-primary button-rounded button-small" data-dismiss="modal" onclick="closeModal();">关闭</button>
        <button type="button" class="button button-primary button-rounded button-small" id="action" action="" article-id="" onclick="changeArticle();">保存</button>
      </div>
    </div>
  </div>
</div>
<!-- changeArticleModal End -->

{% end %}

{% block JS %}
<script src="/static/js/jquery.hotkeys.js"></script>
<script src="/static/js/bootstrap-wysiwyg.js"></script>

<script>
    $(function () {
        $('#article').addClass('active');
    });

    function closeModal() {
        $('#title').val('');
        $('#summary').val('');
        $('#article-type').val(1);
        $('#editor').html('');
        $('#action').attr('action','')
    }

    function changeArticleModal(ths) {
        $('#editor').wysiwyg();
        if($(ths).attr('action') === 'patch'){
            $('#action').attr('action','patch').text('确认修改').attr('class','button button-highlight button-rounded button-small');
            $('#changeArticleModalLabel').text('确认修改文章：').css('color','#f0ad4e');
        }else if($(ths).attr('action') === 'delete'){
            $('#action').attr('action','delete').text('确认删除').attr('class','button button-caution button-rounded button-small');
            $('#changeArticleModalLabel').text('真的要删除文章此文章吗？').css('color','#d9534f');
        }else if($(ths).attr('action') === 'post'){
            $('#action').attr('action','post').text('添加').attr('class','button button-action button-rounded button-small');
            $('#action').attr('article-id','post');
            $('#changeArticleModalLabel').text('增加文章：').css('color','#1E9FFF');
            return
        }
        $('#title').val($(ths).parent().parent().parent().find('.title').text());
        $('#summary').val($(ths).parent().parent().parent().find('.summary').text());
        $('#action').attr('article-id',$(ths).parent().parent().parent().find('.id').text());
        $("#article-type").val($(ths).parent().parent().parent().find('.article_type').attr('type'));
        $('#editor').html($(ths).parent().parent().parent().find('.content').text());
    }

  function changeArticle() {
        var article_data = {};
        article_data['article_id'] = $('#action').attr('article-id');
        article_data['title'] = $('#title').val();
        article_data['article_type'] = $("#article-type").val();
        article_data['summary'] = $('#summary').val();
        article_data['content'] = $('#editor').html();
        article_data['action'] = $('#action').attr('action');
        console.log(article_data);
        $.ajax({
            type:'POST',
            url: '/admin/article',
            data: article_data,
            dataType: 'json',
            success: function(arg){
                console.log(arg);
                if(arg.status !== 'false'){
                    $('.change-article-msg').text(arg.message).css("color",'#4cae4c');
                    window.location.reload();
                }else{
                    $('.change-article-msg').text(arg.message).css("color",'#d9534f');
                }
            }
        });
  }
</script>
{% end %}
